<template>
  <div class="check-statistics-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><DataAnalysis /></el-icon>
          <div class="header-text">
            <h2>盘点统计报表</h2>
            <p>库存盘点数据统计分析</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出报表
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 时间筛选 -->
    <el-card shadow="never" class="filter-card">
      <el-form :inline="true">
        <el-form-item label="统计周期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item label="仓库">
          <el-select v-model="warehouseId" placeholder="全部仓库" clearable style="width: 150px">
            <el-option label="主仓库" :value="1" />
            <el-option label="分仓A" :value="2" />
            <el-option label="分仓B" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 关键指标 -->
    <div class="kpi-row">
      <el-card shadow="hover" class="kpi-card">
        <div class="kpi-content">
          <div class="kpi-icon" style="background: #e6f7ff;">
            <el-icon :size="40" color="#409EFF"><DocumentChecked /></el-icon>
          </div>
          <div class="kpi-info">
            <div class="kpi-label">盘点任务数</div>
            <div class="kpi-value">28</div>
            <div class="kpi-compare">
              <el-icon color="#67C23A"><CaretTop /></el-icon>
              <span class="increase">+12%</span>
              环比上期
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="kpi-card">
        <div class="kpi-content">
          <div class="kpi-icon" style="background: #f0f9ff;">
            <el-icon :size="40" color="#67C23A"><CircleCheck /></el-icon>
          </div>
          <div class="kpi-info">
            <div class="kpi-label">完成率</div>
            <div class="kpi-value">89.3%</div>
            <div class="kpi-compare">
              <el-icon color="#67C23A"><CaretTop /></el-icon>
              <span class="increase">+5.2%</span>
              环比上期
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="kpi-card">
        <div class="kpi-content">
          <div class="kpi-icon" style="background: #fff7e6;">
            <el-icon :size="40" color="#E6A23C"><TrendCharts /></el-icon>
          </div>
          <div class="kpi-info">
            <div class="kpi-label">准确率</div>
            <div class="kpi-value">95.6%</div>
            <div class="kpi-compare">
              <el-icon color="#F56C6C"><CaretBottom /></el-icon>
              <span class="decrease">-1.8%</span>
              环比上期
            </div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="kpi-card">
        <div class="kpi-content">
          <div class="kpi-icon" style="background: #fef0e6;">
            <el-icon :size="40" color="#F56C6C"><Coin /></el-icon>
          </div>
          <div class="kpi-info">
            <div class="kpi-label">盈亏金额</div>
            <div class="kpi-value profit-value">+¥26.5K</div>
            <div class="kpi-compare">
              盘盈：+¥125K | 盘亏：-¥98.5K
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表展示 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never" class="chart-card">
          <div class="chart-title">
            <el-icon><TrendCharts /></el-icon>
            <span>盘点任务趋势</span>
          </div>
          <div class="chart-placeholder">
            <el-icon :size="60" color="#dcdfe6"><TrendCharts /></el-icon>
            <p>盘点任务数量趋势图</p>
            <el-tag>图表组件待集成</el-tag>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="never" class="chart-card">
          <div class="chart-title">
            <el-icon><PieChart /></el-icon>
            <span>盘点类型分布</span>
          </div>
          <div class="chart-placeholder">
            <el-icon :size="60" color="#dcdfe6"><PieChart /></el-icon>
            <p>全盘/抽盘/循环/动态分布</p>
            <el-tag>图表组件待集成</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 排行榜 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="never">
          <div class="chart-title">
            <el-icon><Trophy /></el-icon>
            <span>盘点效率排行</span>
          </div>
          <el-table :data="efficiencyRanking" stripe>
            <el-table-column type="index" label="排名" width="70" />
            <el-table-column prop="person" label="盘点人" />
            <el-table-column prop="count" label="完成数" width="100" align="right" />
            <el-table-column prop="avgTime" label="平均耗时" width="120" align="right" />
            <el-table-column prop="accuracy" label="准确率" width="100" align="right">
              <template #default="{ row }">
                <el-progress 
                  :percentage="row.accuracy" 
                  :stroke-width="6"
                  :show-text="false"
                />
                <span style="margin-left: 8px;">{{ row.accuracy }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="never">
          <div class="chart-title">
            <el-icon><Warning /></el-icon>
            <span>高损耗商品TOP10</span>
          </div>
          <el-table :data="lossRanking" stripe>
            <el-table-column type="index" label="排名" width="70" />
            <el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
            <el-table-column prop="lossQty" label="盘亏数量" width="100" align="right">
              <template #default="{ row }">
                <span class="loss-text">{{ row.lossQty }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lossAmount" label="盘亏金额" width="120" align="right">
              <template #default="{ row }">
                <span class="loss-text">¥{{ row.lossAmount.toFixed(2) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="lossRate" label="损耗率" width="100" align="right">
              <template #default="{ row }">
                <span class="loss-text">{{ row.lossRate }}%</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  DataAnalysis, Download, Search, DocumentChecked, CircleCheck,
  TrendCharts, Coin, CaretTop, CaretBottom, PieChart, Trophy, Warning
} from '@element-plus/icons-vue'

// 状态
const dateRange = ref([])
const warehouseId = ref(null)

// 效率排行
const efficiencyRanking = ref([
  { person: '张三', count: 15, avgTime: '2.3小时', accuracy: 98 },
  { person: '李四', count: 12, avgTime: '2.8小时', accuracy: 96 },
  { person: '王五', count: 10, avgTime: '3.1小时', accuracy: 94 },
  { person: '赵六', count: 8, avgTime: '3.5小时', accuracy: 92 },
  { person: '钱七', count: 6, avgTime: '4.2小时', accuracy: 90 }
])

// 损耗排行
const lossRanking = ref([
  { productName: 'iPhone 15 Pro Max 256GB', lossQty: -45, lossAmount: -449955, lossRate: 4.5 },
  { productName: 'MacBook Pro 14寸 M3', lossQty: -20, lossAmount: -299980, lossRate: 4.0 },
  { productName: 'iPad Pro 12.9寸', lossQty: -30, lossAmount: -239970, lossRate: 3.8 },
  { productName: 'Apple Watch Ultra 2', lossQty: -15, lossAmount: -89985, lossRate: 3.5 },
  { productName: 'AirPods Max', lossQty: -18, lossAmount: -80982, lossRate: 3.2 }
])

// 方法
const handleQuery = () => {
  ElMessage.success('查询完成')
}

const handleExport = () => {
  ElMessage.success('导出功能开发中')
}
</script>

<style scoped>
.check-statistics-container {
  padding: 20px;
}

.header-card,
.filter-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.kpi-card {
  transition: all 0.3s;
}

.kpi-card:hover {
  transform: translateY(-4px);
}

.kpi-content {
  display: flex;
  gap: 20px;
}

.kpi-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.kpi-info {
  flex: 1;
}

.kpi-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.kpi-value.profit-value {
  color: #67C23A;
}

.kpi-compare {
  font-size: 13px;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 4px;
}

.increase {
  color: #67C23A;
  font-weight: 500;
}

.decrease {
  color: #F56C6C;
  font-weight: 500;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e4e7ed;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 8px;
}

.chart-placeholder p {
  margin: 16px 0;
  color: #909399;
  font-size: 14px;
}

.loss-text {
  color: #F56C6C;
  font-weight: 500;
}
</style>

